package myJs.components

import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.Implicits._
import myJs.Utils._
import myJs.myPkg.jquery._
import myJs.tool.Tool._
import japgolly.scalajs.react.ReactMonocle._

/** Created by yz on 3/11/2020
  */
object NodeLabelComponent {

  @Lenses
  case class State(
      showNodeLabel: Boolean,
      nodeFont: String,
      nodeLabelColor: String,
      showNodeLabelName: String,
      nodeFontName: String,
      nodeLabelColorName: String
  )

  object State {

    def init = {
      State(
        showNodeLabel = true,
        nodeFont = "12",
        nodeLabelColor = "#ffffff",
        showNodeLabelName = "",
        nodeFontName = "",
        nodeLabelColorName = ""
      )
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      div(
        ToggleInlineComponent
          .Props(
            State.showNodeLabel.zoomL,
            label = messages("showNodeLabels"),
            name = s.showNodeLabelName,
            fieldName = ""
          )
          .render,
        div(
          (display := "none").unless(s.showNodeLabel),
          div(
            `class` := "form-group",
            label(`class` := "control-label col-sm-4", messages("nodeLabelFontsize")),
            div(
              `class` := "col-sm-8",
              PureInputComponent
                .Props(State.nodeFont.zoomL, name = s.nodeFontName, formJq = $("#corNetwork #form"))
                .render
            )
          ),
          div(
            `class` := "form-group",
            label(`class` := "control-label col-sm-4", messages("nodeLabelColor")),
            div(
              `class` := "col-sm-8",
              PureMiniColorComponent.Props(State.nodeLabelColor.zoomL, name = s.nodeLabelColorName).render
            )
          )
        )
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
